import React from 'react';
import { Table, Button, Space, Modal, message } from 'antd';
import { EditOutlined, FileTextOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Device } from '../../types/device';

interface DeviceListTableProps {
  devices: Device[];
  onAddDevice: () => void;
  onEditDevice: (device: Device) => void;
  onDeleteDevice: (device: Device) => void;
  onOpenDataModal: (device: Device) => void;
  onOpenProductTemplateModal: () => void;
}

const DeviceListTable: React.FC<DeviceListTableProps> = ({
  devices,
  onAddDevice,
  onEditDevice,
  onDeleteDevice,
  onOpenDataModal,
  onOpenProductTemplateModal
}) => {
  // 表格列定义
  const columns = [
    { title: '序号', dataIndex: 'index', key: 'index', width: 80 },
    { title: '设备名称', dataIndex: 'name', key: 'name' },
    { title: '设备SN', dataIndex: 'sn', key: 'sn' },
    { title: '设备协议', dataIndex: 'protocol', key: 'protocol' },
    { title: '数据周期', dataIndex: 'dataCycle', key: 'dataCycle' },
    { title: '所属项目', dataIndex: 'project', key: 'project' },
    { 
      title: '数据管理', 
      key: 'dataManagement', 
      render: (_: any, record: Device) => (
        <Button type='primary' onClick={() => onOpenDataModal(record)}>添加数据</Button>
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: Device) => (
        <Space size="middle">
          <Button
            type="text"
            icon={<EditOutlined />}
            onClick={() => onEditDevice(record)}
            size="small"
          >
            编辑
          </Button>
          <Button
            type="text"
            icon={<FileTextOutlined />}
            size="small"
            onClick={() => onOpenProductTemplateModal()}
          >
            模板添加
          </Button>
          <Button
            type="text"
            danger
            icon={<DeleteOutlined />}
            size="small"
            onClick={() => {
              Modal.confirm({
                title: '确认删除',
                content: '确定要删除此设备吗？此操作不可撤销。',
                okText: '确认',
                cancelText: '取消',
                onOk: () => {
                  onDeleteDevice(record);
                  message.success('设备已删除');
                }
              });
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={devices}
      rowKey="key"
      pagination={{ pageSize: 10 }}
      bordered
      title={() => (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h2>设备列表</h2>
          <Button type="primary" icon={<PlusOutlined />} onClick={onAddDevice}>
            添加设备
          </Button>
        </div>
      )}
    />
  );
};

export default DeviceListTable;